<!-- 预览时被GenerateFormItem调用,生成具体组件-->
<template>
  <span>
  <div>

		  <el-dialog
        title="添加批注"
        :visible.sync="annotationDialogVisible"
        width="25%"
        :modal-append-to-body="true"
        :append-to-body="true"
      >
			  <el-form :inline="true" :model="annotationForm" style="margin-left: -25px;">
				  <el-form-item label="批注内容">
					  <el-input type="textarea" v-model="annotationForm.context" :rows="2"></el-input>
				  </el-form-item>
			  </el-form>
			  <span slot="footer" class="dialog-footer">
             <el-button type="primary" @click="annotationConfirm">确 定</el-button>
    <el-button @click="annotationDialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="clearAnnotation">清除批注</el-button>
  </span>
		  </el-dialog>
	  </div>
    <template v-if="widget.type == 'blank'">
      <div :style="{width:elShowWidth(isTable,widget.options.width)}">
        <slot :name="widget.model" :model="dataModels"></slot>
      </div>

    </template>
    <!--      选择部门-->

  <el-dialog
    title="选择部门"
    :visible.sync="depAssemblyDialogVisible"
    width="40%"
    :modal-append-to-body="true"
    :append-to-body="true"
  >
			  <el-form :inline="true" :model="depAssemblyForm" label-width="55px">

				  <el-select v-model='depAssemblyForm.groupName' style="margin-top: 10px" @change="changeDemension">
                     <el-option v-for="item in demensionData" :value="item.code" :label="item.demName"></el-option>
                   </el-select>
                      <Tree ref="tree"
                            :data="categoryData" show-checkbox
                      />
			  </el-form>
			  <span slot="footer" class="dialog-footer">
             <el-button type="primary" @click="depAssemblyConfirm">确 定</el-button>
    <el-button @click="depAssemblyDialogVisible = false">取 消</el-button>
  </span>
		  </el-dialog>
      <template v-if="widget.type == 'process' && widget.options.show == true">

              <Table
                ref="selection"
                highlight-row
                :columns="opinion.tableColumns"
                :data="opinion.tableData"
              />
      </template>
    <template v-if="widget.type == 'depAssembly' && widget.options.show == true">
             <el-input
               :type="widget.options.dataType"
               :name="widget.model"
               v-model="dataModel"
               :readonly="true"
               :disabled="widget.options.disabled"
               :placeholder="widget.options.placeholder"
               v-on:click.native="depAssemblyOpen(widget)"
               :style="{width:elShowWidth(isTable,widget.options.width)}">

                   </el-input>


    </template>
    <template v-if="widget.type == 'autograph' && widget.options.show == true">

        <vue-esign ref="esign" :width="widget.options.autographWidth" :height="widget.options.autographHeight"
                   :isCrop="widget.options.crop"
                   :lineWidth="widget.options.lineWidth"
                   :lineColor="widget.options.lineColor"
                   :bgColor.sync="widget.options.bgColor"
        />
                    <el-row :gutter="10" class="mb8" style="margin-top: 5px">
              <el-col :span="1.5">
                          <el-button v-if="!widget.options.disabled" type="primary"
                                     @click="handleGenerate">确定</el-button>

              </el-col>
              <el-col :span="1.5">
                          <el-button v-if="!widget.options.disabled" @click="handleReset">重置</el-button>

              </el-col>
                    </el-row>

      <img v-if="dataModel" :src="dataModel" alt="">

    </template>
    <template v-if="widget.type == 'input' && widget.options.show == true">

       <span v-if="widget.tip !== undefined  &&  widget.tip!=null">
       <el-tooltip class="item" effect="dark" :content="widget.tip" placement="right-end">

          <el-input
            v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
            :type="widget.options.dataType"
            :name="widget.model"
            v-model.number="dataModel"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"
            :clearable="widget.options.clearable"
            :style="{width:elShowWidth(isTable,widget.options.width)}">

      </el-input>


      <el-input
        v-else
        :type="widget.options.dataType"
        v-model="dataModel"
        :name="widget.model"
        :disabled="widget.options.disabled"
        :placeholder="widget.options.placeholder"

        :style="{width:elShowWidth(isTable,widget.options.width)}">

      </el-input>
    </el-tooltip>



      </span>


              <span v-else>
             <el-input
               v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
               :type="widget.options.dataType"
               :name="widget.model"
               v-model.number="dataModel"
               :disabled="widget.options.disabled"
               :placeholder="widget.options.placeholder"
               :clearable="widget.options.clearable"
               show-password="{widget.options.showPassword==true}"
               :style="{width:elShowWidth(isTable,widget.options.width)}">


                   </el-input>

        <span v-else>
            <el-input v-if="widget.options.showPassword==true"

                      :type="widget.options.dataType"
                      v-model="dataModel"
                      :name="widget.model"
                      :disabled="widget.options.disabled"
                      :placeholder="widget.options.placeholder"
                      :clearable="widget.options.clearable"
                      show-password
                      :style="{width:elShowWidth(isTable,widget.options.width)}">
      </el-input>
            <el-input v-else

                      :type="widget.options.dataType"
                      v-model="dataModel"
                      :name="widget.model"
                      :disabled="widget.options.disabled"
                      :placeholder="widget.options.placeholder"
                      clearable
                      :style="{width:elShowWidth(isTable,widget.options.width)}">
                <template v-if="widget.options.unit!=undefined && widget.options.unit.length>0" slot="append">{{widget.options.unit}}</template>
      </el-input>
           </span>
                    <span v-if="widget.options.showAnnotation"
                          :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
                          v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>

      </span>

    </template>
   <el-dialog title="" :visible.sync="dialogFormVisible" :append-to-body="true" width="80%">
      <el-table :data="customDialogData" @row-click="singleElection">
          <el-table-column
            width="55">
              <template slot-scope="scope">
            <el-radio class="radio" v-model="templateSelection" :label="scope.$index">&nbsp;</el-radio>
        </template>
        </el-table-column>
          <el-table-column v-for="customDialogTableColumn in customDialogTableColumns"
                           :prop="customDialogTableColumn.columnKey" :label="customDialogTableColumn.description">


          </el-table-column>
      </el-table>

<el-pagination
  :page-sizes="[10, 20, 30, 50, 100]"
  :current-page="formCustomDialogCurrentPage"
  :page-size="formCustomDialogPageSize"
  :total="formCustomDialogTotal"
  @size-change="handleformCustomDialogSizeChange"
  @current-change="handleformCustomDialogCurrentChange"
  layout="total,jumper,prev, pager, next,sizes"
>
</el-pagination>
          <div slot="footer" class="dialog-footer">

            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click.native="confirmFormCustomDialog()">确 定</el-button>
        </div>
   </el-dialog>





        <template v-if="widget.type == 'dialog'">

       <el-button type="primary" :class="widget.options.icon"
                  @click="handleDialog()">{{widget.options.btnName}}</el-button>
    </template>
       <el-dialog title="" :visible.sync="userDialogFormVisible" :append-to-body="true" width="80%">
      <el-table v-if="widget.options.isSingle" :data="customDialogData" @selection-change="userDialogFormchangeFun">
        <el-table-column
          type="selection"
          width="55">
    </el-table-column>
          <el-table-column :key="index" v-for="(item,index) in customDialogTableColumns" :prop="item.columnKey"
                           :label="item.description">


          </el-table-column>
      </el-table>
               <el-table v-else :data="customDialogData" @row-click="userDialogingleElection">
          <el-table-column
            width="55">
              <template slot-scope="scope">
                              <el-radio class="radio" v-model="templateSelection"
                                        :label="scope.$index">&nbsp;</el-radio>

        </template>
        </el-table-column>
          <el-table-column v-for="customDialogTableColumn in customDialogTableColumns"
                           :prop="customDialogTableColumn.columnKey" :label="customDialogTableColumn.description">


          </el-table-column>
      </el-table>

<el-pagination
  :page-sizes="[10, 20, 30, 50, 100]"
  :current-page="formCustomDialogCurrentPage"
  :page-size="formCustomDialogPageSize"
  :total="formCustomDialogTotal"
  @size-change="handleUserformCustomDialogSizeChange"
  @current-change="handleUserformCustomDialogCurrentChange"
  layout="total,jumper,prev, pager, next,sizes"
>
</el-pagination>
          <div slot="footer" class="dialog-footer">

            <el-button @click="userDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click.native="confirmUserFormCustomDialog()">确 定</el-button>
        </div>
   </el-dialog>



        <template v-if="widget.type == 'userDialog'">
            <el-tag
              :key="tag.key"
              v-for="(tag,index) in widget.options.chooseFiledList"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
  {{tag.lable}}
</el-tag>


       <el-button type="primary" :class="widget.options.icon"
                  @click="handleUserDialog()">{{widget.options.btnName}}</el-button>
    </template>



    <template v-if="widget.type == 'iframe' && widget.options.show == true">
  <iframe frameborder=0
          scrolling=auto
          :src="widget.options.src"
          :width="widget.options.width"
          :height="widget.options.height"

  ></iframe>

    </template>
    <template v-if="widget.type == 'textarea' && widget.options.show == true">
      <el-input type="textarea" :rows="1"
                v-model="dataModel"
                :disabled="widget.options.disabled"
                :placeholder="widget.options.placeholder"
                :style="{width:elShowWidth(isTable,widget.options.width)}"
      ></el-input>
           <span v-if="widget.options.showAnnotation"
                 :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>
    <template v-if="widget.type == 'badge' && widget.options.show == true">


          <el-badge :value="widget.options.defaultValue" :max="widget.options.max" :is-dot="widget.options.dot"
                    v-model="widget.options.defaultValue" class="item">
          </el-badge>
   <span v-if="widget.options.showAnnotation"
         :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>
    <template v-if="widget.type == 'inputNumber' && widget.options.show == true">


       <el-input-number v-model="dataModel"
                        :max="widget.options.max"
                        :min="widget.options.min"
                        :step="widget.options.step"
                        :disabled="widget.options.disabled"
                        :size="widget.options.radioSize">
</el-input-number>
   <span v-if="widget.options.showAnnotation"
         :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>

    <template v-if="widget.type == 'number' && widget.options.show == true">
      <el-input-number
        v-model="dataModel"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
        :step="widget.options.step"
        :disabled="widget.options.disabled"
        controls-position="right"
      ></el-input-number>
           <span v-if="widget.options.showAnnotation"
                 :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>
      <template v-if="widget.type == 'h4'">
    <h4>{{widget.options.defaultValue}}</h4>   <span v-if="widget.options.showAnnotation"
                                                     :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
                                                     v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>
      <template v-if="widget.type == 'p'">
    <p>{{widget.options.defaultValue}}</p>
             <span v-if="widget.options.showAnnotation"
                   :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>
      <template v-if="widget.type == 'small'">
    <small>{{widget.options.defaultValue}}</small>
             <span v-if="widget.options.showAnnotation"
                   :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>
      <template v-if="widget.type == 'mark'">
    <mark>{{widget.options.defaultValue}}</mark>
             <span v-if="widget.options.showAnnotation"
                   :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>


      <template v-if="widget.type == 'del'">
    <del>{{widget.options.defaultValue}}</del>
             <span v-if="widget.options.showAnnotation"
                   :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>
      <template v-if="widget.type == 'u'">
    <u>{{widget.options.defaultValue}}</u>
    </template>
      <template v-if="widget.type == 'em'">
    <em>{{widget.options.defaultValue}}</em>
    </template>
      <template v-if="widget.type == 'strong'">
    <strong>{{widget.options.defaultValue}}</strong>
             <span v-if="widget.options.showAnnotation"
                   :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>

<template v-if="widget.type == 'icon'">
    <i :class="widget.options.icon">{{widget.options.defaultValue}}</i>
       <span v-if="widget.options.showAnnotation"
             :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>


    <template v-if="widget.type == 'radio' && widget.options.show == true">
      <el-radio-group v-model="dataModel"
                      v-if="(widget.options.remoteUrlKey!=null && widget.options.remoteUrlKey=='')"
                      :style="{width:elShowWidth(isTable,widget.options.width)}"
      >
          <el-radio
            :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
            :label="item.value"
            :border="widget.options.border"
            :disabled="widget.options.disabled"
            v-for="(item, index) in ( widget.options.options)"
            @change="fireControlsRule"
          >
            {{widget.options.showLabel ? item.label : item.value}}
          </el-radio>


      </el-radio-group>

          <el-radio-group v-model="dataModel" v-else
                          :style="{width:elShowWidth(isTable,widget.options.width)}"
          >
                <el-radio
                  :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
                  :label="item.value"
                  :border="widget.options.border"
                  :disabled="widget.options.disabled"
                  :key="index"
                  v-for="(item, index) in remoteFuncsFields "
                  @change="fireControlsRule"
                >
                        <template>{{widget.options.showLabel ? item.label : item.value}}</template>
                      </el-radio>
      </el-radio-group>

   <span v-if="widget.options.showAnnotation"
         :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>

    </template>
     <template v-if="widget.type == 'checkbox' && widget.options.show == true">

        <el-checkbox-group v-model="dataModel" @change="checkboxChange"
                           :style="{width: isTable ? '100%' : widget.options.width}"
        >
        <el-checkbox

          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value"
          v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
          :key="index"
        >
          <template v-if="widget.options.remote">{{item.label}}</template>
          <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
        </el-checkbox>
      </el-checkbox-group>
    </template>


    <template v-if="widget.type == 'time' && widget.options.show == true">
      <el-time-picker
        v-model="dataModel"
        :is-range="widget.options.isRange"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :arrowControl="widget.options.arrowControl"
        :value-format="widget.options.format"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
      >
      </el-time-picker>
           <span v-if="widget.options.showAnnotation"
                 :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>

    <template v-if="widget.type=='date' && widget.options.show == true">
      <el-date-picker
        v-model="dataModel"
        :type="widget.options.type"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
        :format="widget.options.format"
        @change="changeDate"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
      >
      </el-date-picker>
           <span v-if="widget.options.showAnnotation"
                 :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>

    <template v-if="widget.type =='rate' && widget.options.show == true">
      <el-rate v-model="dataModel"
               :max="widget.options.max"
               :disabled="widget.options.disabled"
               :allow-half="widget.options.allowHalf"
      ></el-rate>
    </template>

    <template v-if="widget.type == 'color' && widget.options.show == true">
      <el-color-picker
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :show-alpha="widget.options.showAlpha"
      ></el-color-picker>
           <span v-if="widget.options.showAnnotation"
                 :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>
 <template v-if="widget.type == 'dividers'">
       <el-divider :content-position="widget.options.labelPosition">
                {{widget.options.text}}<i :class="widget.options.icon" @click="explend(widget)"></i></el-divider>
    </template>
 <template v-if="widget.type == 'customer'">
     <div v-html="widget.options.customerContext"></div>

    </template>
 <template v-if="widget.type == 'tree' && widget.options.show == true" >
       <el-cascader
         v-model="dataModel"
         :options="widget.options.optionList"
         :clearable="widget.options.clearable"

         :show-all-levels="widget.options.levels"
       >
       </el-cascader>

    </template>
    <template v-if="widget.type == 'select' && widget.options.show == true">
         <el-select v-if="widget.options.remoteUrlKey!=null && widget.options.remoteUrlKey.length>0"
                    v-model="dataModel"
                    :disabled="widget.options.disabled"
                    :multiple="widget.options.multiple"
                    :clearable="widget.options.clearable"
                    :placeholder="widget.options.placeholder"
                    :style="{width:elShowWidth(isTable,widget.options.width)}"
                    @change="fireControlsRule"
                    :filterable="widget.options.filterable">

          <el-option v-if="widget.options.remoteUrlKey!=null && widget.options.remoteUrlKey.length>0"
                     v-for="item in remoteFuncsFields"
                     :key="item.value"
                     :value="item.value"
                     :label="item.value"

          >
             </el-option>
        </el-select>

      <el-select v-else
                 v-model="dataModel"
                 :disabled="widget.options.disabled"
                 :multiple="widget.options.multiple"
                 :clearable="widget.options.clearable"
                 :placeholder="widget.options.placeholder"
                 :style="{width:elShowWidth(isTable,widget.options.width)}"
                 :filterable="widget.options.filterable"
                 @change="fireControlsRule"
      >

             <el-option v-for="item in (widget.options.options)"
                        :key="item.value" :value="item.value"
                        :label="item.value"
             >

        </el-option>



      </el-select>
           <span v-if="widget.options.showAnnotation"
                 :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>


        <template v-if="widget.type == 'alert'">
    <el-alert :title="widget.options.title"
              :closable="widget.options.closable"
              v-model="dataModel"
              :show-icon="widget.options.showIcon"
              :effect="widget.options.item"
              :type="widget.options.alertType"
              :close-text="widget.options.closeText"
              :center="widget.options.center"
    >{{widget.options.defaultValue}}</el-alert>
    </template>



<template v-if="widget.type == 'steps'">

          <el-steps :active="widget.options.defaultValue"
                    v-model="dataModel"
                    :finish-status="widget.options.finishStatus"
                    :align-center="widget.options.alignCenter"
                    :simple="widget.options.simple"
                    :process-status="widget.options.processStatus"
                    :direction="widget.options.direction"
          >


	  <el-step v-for="item in widget.options.stepItemOptions" :title="item.value" :key="item.value">
	</el-step>

</el-steps>
    <el-button style="margin-top: 12px;" type="primary" @click="nextStep(widget)" :disabled="widget.options.nextStep">下一步</el-button>
    </template>

       <template v-if="widget.type == 'tag'">
      <el-tag v-model="dataModel" closable
              :disable-transitions="false"
              size="widget.options.radioSize"
              @close="handleTagClose(tag,tagsIndex)"
              v-for="(tag, tagsIndex) in widget.options.options"
              :key="tagsIndex"
              :type="tag.value">
        {{tag.label}}
      </el-tag>
    </template>

 <template v-if="widget.type == 'link'">

  <el-link
    :href="widget.options.href"
    v-model="dataModel"
    :target="widget.options.target"
    :underline="widget.options.underline"
  >{{widget.options.defaultValue}}
  </el-link>
   <span v-if="widget.options.showAnnotation"
         :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>

          <template v-if="widget.type == 'breadcrumb'">

   <el-breadcrumb :separator="widget.options.separator">

          <el-breadcrumb-item v-for="item in widget.options.breadcrumbItemOptions" :key="item.value"
                              :value="item.value">
        {{item.value}}
         </el-breadcrumb-item>


</el-breadcrumb>
   <span v-if="widget.options.showAnnotation"
         :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>




 <template v-if="widget.type == 'dateCalendar'">
<el-calendar

  v-model="dataModel"


>
    <template
      slot="dateCell"
      slot-scope="{date, data}">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
    </p>
  </template>
</el-calendar>
        <span v-if="widget.options.showAnnotation"
              :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>

   <template v-if="widget.type == 'progress'">

 <el-progress
   :percentage="widget.options.percentage"
   :type="widget.options.progressType"
   :status="widget.options.status"
   :show-text="widget.options.showText"
   :stroke-width="widget.options.strokeWidth"
   :text-inside="widget.options.textInside"

 ></el-progress>

   <span v-if="widget.options.showAnnotation"
         :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>



    <template v-if="widget.type=='switch' && widget.options.show == true">
      <el-switch
        v-model="dataModel"
        :disabled="widget.options.disabled"
      >
      </el-switch>
           <span v-if="widget.options.showAnnotation"
                 :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>

       <template v-if="widget.type=='btn'  && widget.options.show == true">
    <el-button :size="widget.options.radioSize" @click="clickBtn()" :style="{'margin-left':widget.options.marginLeft}"
               :type="widget.options.type"
               :plain="widget.options.plain"
               :round="widget.options.round"
               :circle="widget.options.circle"
               :loading="widget.options.loading"
               :icon="widget.options.icon"

    >{{widget.options.name}}</el-button>
    </template>



    <template v-if="widget.type=='slider' && widget.options.show == true">
      <el-slider
        v-model="dataModel"
        :min="widget.options.min"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :step="widget.options.step"
        :show-input="widget.options.showInput"
        :range="widget.options.range"
        :showTooltip="widget.options.showTooltip"
        :style="{width:elShowWidth(isTable,widget.options.width)}"
      ></el-slider>
           <span v-if="widget.options.showAnnotation"
                 :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>



    <template v-if="widget.type == 'editor' && widget.options.show == true">
      <fm-editor
        v-model="dataModel"
        :width="isTable ? '100%' : widget.options.width"
        :height="widget.options.height"
      >

      </fm-editor>
           <span v-if="widget.options.showAnnotation"
                 :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>



  <template v-if="widget.type=='fileUpload' && widget.options.show == true">
       <fm-upload
         v-model="dataModel"
         :disabled="widget.options.disabled"
         :style="{'width': isTable ? '100%' : widget.options.width}"
         :width="widget.options.sizes.width"
         :height="widget.options.sizes.height"
         :token="widget.options.token"
         :domain="widget.options.domain"
         :multiple="widget.options.multiple"
         :length="widget.options.length"
         :is-qiniu="widget.options.isQiniu"
         :is-delete="widget.options.isDelete"
         :min="widget.options.min"
         :is-edit="widget.options.editable"
         :action="widget.options.action"
         :supportedTypeStr="widget.options.supportedTypeStr">
      </fm-upload>
         <span v-if="widget.options.showAnnotation"
               :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>
  <template v-if="widget.type=='imgupload' && widget.options.show == true">
       <image-upload
         v-model="dataModel"
         :disabled="widget.options.disabled"
         :style="{'width': isTable ? '100%' : widget.options.width}"
         :width="widget.options.size.width"
         :height="widget.options.size.height"
         :token="widget.options.token"
         :domain="widget.options.domain"
         :multiple="widget.options.multiple"
         :length="widget.options.length"
         :is-qiniu="widget.options.isQiniu"
         :is-delete="widget.options.isDelete"
         :min="widget.options.min"
         :is-edit="widget.options.isEdit"
         :supportedTypeStr="widget.options.supportedTypes"
         :action="widget.options.action">
      </image-upload>
         <span v-if="widget.options.showAnnotation"
               :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>


    <!--        省市级联-->
    <template v-if="widget.type == 'cascader' && widget.options.show == true">
        <div v-if="widget.options.modeMethod=='provinceAndCityData'">
        <el-cascader :options="provinceAndCityData" v-model="dataModel">

        </el-cascader>

        </div>
         <div v-else-if="widget.options.modeMethod=='provinceAndCityDataPlus'">
         <el-cascader :options="provinceAndCityDataPlus" v-model="dataModel">

        </el-cascader>

        </div>
         <div v-else-if="widget.options.modeMethod=='regionData'">
 <el-cascader :options="regionData" v-model="dataModel">

        </el-cascader>

        </div>
         <div v-else-if="widget.options.modeMethod=='selectedOptions'">

 <el-cascader :options="regionDataPlus" v-model="dataModel">

        </el-cascader>

        </div>   <span v-if="widget.options.showAnnotation"
                       :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
                       v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>

    </template>

    <template v-if="widget.type == 'text' && widget.options.show == true">


 <span v-if="  widget.options.tip!== undefined  &&   widget.options.tip.length>0">

          <el-tooltip class="item" effect="dark" :content="widget.options.tip" placement="right-end">
<!--                 <span  :style="{color:(widget.options.color.length>0?widget.options.color:'')}">{{dataModel}}</span>-->
                                <span :style="{'font-weight':widget.options.bold?'bold':'normal',color:widget.options.color,fontSize:(widget.options.fontSize+'px')}">{{dataModel}}</span>



    </el-tooltip>
        </span>
      <span v-else>
         <span :style="{'font-weight':widget.options.bold?'bold':'normal',color:widget.options.color,fontSize:(widget.options.fontSize+'px')}">{{dataModel}}</span>




      </span>



    </template>

        <template v-if="widget.type=='processInfo' && widget.options.show == true">
<el-table
  :data="tableData"
  border
  style="width: 100%"
>
      <el-table-column
        prop="taskName"
        label="节点名称"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="执行人"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="statusVal"
        label="操作"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="opinion"
        label="审批意见"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="接受时间">
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="审批时间">
      </el-table-column>
    </el-table>


   </template>
    <!-- 子表单的预览 -->
   <template v-if="widget.type == 'table' && widget.options.show == true">
      <fm-form-table
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tableColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :models_temp="models_temp"
      >
     <!--   <template v-slot:[blank.name]="scope" v-for="blank in blanks">
          <slot :name="blank.name" :model="scope.model"></slot>
        </template> -->
      </fm-form-table>
    </template>
    <!-- 区块的预览 -->
	<template v-if="widget.type == 'block' && widget.options.show == true">
	  <fm-form-block
      v-model="dataModel"
      :widget="widget"
      :columns="widget.tableColumns"
      :models="dataModels"
      :remote="remote"
      :blanks="blanks"
      :strutAll="strutAll"
      :path="path"
      :models_temp="models_temp"
    >
	    <template v-slot:[blank.name]="scope" v-for="blank in blanks">
	      <slot :name="blank.name" :model="scope.model"></slot>
	    </template>
      </fm-form-block>
	</template>
    <!-- card的预览 -->
	<template v-if="widget.type == 'card' && widget.options.show == true">
	  <generate-card
      v-model="dataModel"
      :widget="widget"
      :columns="widget.tableColumns"
      :models="dataModels"
      :remote="remote"
      :blanks="blanks"
      :strutAll="strutAll"
      :path="path"
      :models_temp="models_temp"
    >
	    <template v-slot:[blank.name]="scope" v-for="blank in blanks">
	      <slot :name="blank.name" :model="scope.model"></slot>
	    </template>
      </generate-card>
	</template>

    <!-- tabs的预览 -->
	<template v-if="widget.type == 'tabs' && widget.options.show == true">
	  <generate-tabs
      v-model="dataModel"
      :widget="widget"
      :columns="widget.tabColumns"
      :models="dataModels"
      :remote="remote"
      :blanks="blanks"
      :strutAll="strutAll"
      :path="path"
      :models_temp="models_temp"
    >
	    <template v-slot:[blank.name]="scope" v-for="blank in blanks">
	      <slot :name="blank.name" :model="scope.model"></slot>
	    </template>
      </generate-tabs>
    </template>
    <!-- 折叠面板的预览 -->
	<template v-if="widget.type == 'collapse' && widget.options.show == true">
	  <collapse-tabs
      v-model="dataModel"
      :widget="widget"
      :columns="widget.tabColumns"
      :models="dataModels"
      :remote="remote"
      :blanks="blanks"
      :strutAll="strutAll"
      :path="path"
      :models_temp="models_temp"
    >
	    <template v-slot:[blank.name]="scope" v-for="blank in blanks">
	      <slot :name="blank.name" :model="scope.model"></slot>
	    </template>
      </collapse-tabs>
    </template>
    <!--省市级联-->
	<template v-if="widget.type == 'distpicker' && widget.options.show == true">
	  <distpicker :province="widget.options.distpicker.province" :city="widget.options.distpicker.city"
                :area="widget.options.distpicker.area" v-model="dataModel" @selected="onSelected"></distpicker>
           <span v-if="widget.options.showAnnotation"
                 :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}" v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>

       <template v-if="widget.type == 'vue2Editor'">
             <div id="app">

                   <vue-editor class="ql-editor-class"
                               v-model="dataModel" useCustomImageHandler @image-added="handleImageAdded">
                   </vue-editor>

             </div>
              <span v-if="widget.options.showAnnotation"
                    :style="{'margin-left':showAnnotation(),'color':showAnnotationColor()}"
                    v-on:click="addAnnotation()">{{widget.options.annotationTitle}}
				  </span>
    </template>

  </span>


</template>

<script>
  // tree 树数据
  //ids 要选中节点的id
  function filterDeviceTree(tree, ids, fild) {

    let _tree = tree

    if (ids.length == 0) {
      return _tree
    }

    return _tree.filter((item) => {
      if (item.children.length == 0 || !item.children) {
        if (ids.indexOf(item[fild]) > -1 || ids.indexOf(item[fild]) > -1) {
          item.checked = true
        }
        return true
      } else if (item.children && item.children.length > 0) {
        item.children = filterDeviceTree(item.children, ids, fild)
        return item.children.length > 0
      } else {
        return false
      }
    })
  };

  import FmUpload from './Upload'
  import ImageUpload from './widget/image/index'
  import FmEditor from './Editor/tinymce'
  import FmFormTable from './FormTable/formTableIndex'
  import request from '../util/request.js'
  import {findTableColumnControls, getAllControls, uniqueUser} from './router/utils.js'
  import API from './router/api.js'
  import {VueEditor} from "vue2-editor";
  import axios from 'axios'
  import vm from '../main'
  import Distpicker from 'v-distpicker'

  import {provinceAndCityData, provinceAndCityDataPlus, regionData, regionDataPlus} from 'element-china-area-data'
  import {verification} from './router/verification.js'
  import FmFormBlock from './FormBlock'
  import GenerateTabs from './generate/tabs/GenerateTabs'
  import GenerateCard from './generate/card/GenerateCard'
  import CollapseTabs from './generate/collapse/CollapseTabs'
  import qs from 'qs'

  export default {
    name: 'generate-element-item',
    components: {
      FmUpload,
      FmEditor,
      FmFormTable,
      FmFormBlock,
      GenerateCard,
      CollapseTabs,
      GenerateTabs,
      VueEditor,
      ImageUpload,
      Distpicker
    },
    props: ['widget', 'value', 'models', 'remote', 'isTable', 'blanks', 'models_temp', 'path', 'strutAll','taskId'],
    data() {
      return {
        opinion:
          {
            show: false,
            loading: true,
            tableColumns: [
              {
                title: '任务名称',
                key: 'nodeName',

              },
              {
                title: '创建时间',
                key: 'createTime'
              },
              {
                title: '审批时间',
                key: 'completeTime'
              },
              {
                title: '执行人',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  if (node.a1FlowTaskTrajectoryEntity) {
                    html = node.a1FlowTaskTrajectoryEntity.userName
                  } else {
                    html = node.auditor
                  }
                  if(!html){
                    if(node.identityLinks){
                      html=node.identityLinks
                    }

                  }
                  return h('span', html)
                },
                tooltip: true
              },
              {
                title: '备注/意见',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.opinion
                  return h('span', html)
                },
              },
              {
                title: '状态说明',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.statusVal
                  return h('span', html)
                },
                tooltip: true
              }

            ],
            tableData: []
          },
        processTableData:[],
        lineWidth: 6,
        lineColor: '#000000',
        bgColor: '',
        resultImg: '',
        isCrop: false,
        tmpGroup: "",
        demensionForm: {
          page: 1,
          pageSize: 10,
          limit: 1000
        },
        categoryKvData: [],
        demensionData: [],
        categoryData: [],
        distpicker: {
          province: "省",
          city: "市",
          area: "区",
        },
        obj: {},
        person: {
          name: 'mark',
          gender: '男'
        },

        message: {
          a: "塞纳河畔 左岸的咖啡"
        },
        annotationForm: {context: ""},
        depAssemblyForm: {
          groupName: "",
          code: "",
        },

        annotationDialogVisible: false,
        depAssemblyDialogVisible: false,
        gridData: [],
        dynamicTags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: '',
        formCustomDialogCurrentPage: 1,
        formCustomDialogPageSize: 10,
        formCustomDialogTotal: 0,
        remoteFuncsFields: [],
        formCustomDialogMultipleSelection: [],
        userDialogFormMultipleSelection: [],
        customDialogData: [],
        customDialogTableColumns: [],
        formCustomDialogData: {},
        dialogFormVisible: false,
        userDialogFormVisible: false,
        templateSelection: '',
        templateSelectionData: {},
        dataModel: this.value,
        tableData: [],
        optionsArray:[],
        options: [],
        dataModels: {...this.models},
        provinceAndCityData: provinceAndCityData,
        regionData: regionData,
        provinceAndCityDataPlus: provinceAndCityDataPlus,
        regionDataPlus: regionDataPlus,
        selectedOptions: [],
        address: {
          province: "",
          city: "",
          county: ""
        }
      }
    },
    mounted() {
      window.watchApi = this;
      this.getTableData();
      this.initTableData();
      this.initRemoteFuncs();
      // this.$set(this.obj,  '111', "4444");

    },
    created() {
      this.widget.options.remoteOptions = []
      //表单渲染的时候，初始化数据
      if (this.widget.type == 'userDialog') {
        var dataModels_userDialog = this.dataModels[this.widget.model];
        if (dataModels_userDialog) {
          this.widget.options.chooseFiledList = dataModels_userDialog;
        }
      }
      if (this.widget.type == 'tag') {
        var dataModels_tag = this.dataModels[this.widget.model];
        if (dataModels_tag) {
          this.widget.options.options = dataModels_tag
        }
        this.dataModels[this.widget.model] = this.widget.options.options


      }
      if (this.widget.type == 'progress') {
        this.dataModels[this.widget.model] = this.widget.options.percentage
      }
      if (this.widget.type == 'steps') {
        this.widget.options.defaultValue = this.dataModels[this.widget.model]
      }
      if (this.widget.type == 'distpicker') {
        var distpicker_val = this.dataModels[this.widget.model]
        if (distpicker_val) {
          this.widget.options.distpicker.province = distpicker_val['province']
          this.widget.options.distpicker.city = distpicker_val['city']
          this.widget.options.distpicker.area = distpicker_val['county']
        }
        if (this.dataModel){
          this.widget.options.distpicker.province =this.dataModel.province
          this.widget.options.distpicker.city =this.dataModel.city
          this.widget.options.distpicker.area =this.dataModel.county
        }
      }
      if (this.widget.type == 'depAssembly') {
        this.getDemensionList()
        this.getKvAction();
      }
      if (this.widget.type == 'process') {
        this.getProcess(this.widget)
      }
    },
    methods: {
      getProcess(){
  // alert(this.taskId)
        if (this.taskId){
          request.get(API.prefix +'/a1bpmn/api/runtime/hisInstance/v1/nodeOpinion?instId=' + this.taskId)
            .then(res => {
              if (res.code==0){
                var options = res.data;
                this.opinion.tableData=options
              }
            })
        }

      },
      getTreeOptions(widget){
        var customDialogAlias=   widget.options.customDialogAlias
        if (!customDialogAlias){
          this.$message.error('数据源没有配置')
          return
        }
        var parentKey=  widget.options.parentKey
        if (!parentKey){
          this.$message.error('父节点字段没有配置')
          return
        }
        var lableKey=  widget.options.lableKey
        if (!lableKey){
          this.$message.error('lableKey没有配置')
          return
        }
        var valueKey=  widget.options.valueKey
        if (!valueKey){
          this.$message.error('valueKey没有配置')
          return
        }
        var parentVal=  widget.options.parentVal
        if (!parentVal){
          this.$message.error('父节点值没有配置')
          return
        }

        request.get(API.prefix + '/form/customDialog/get/tree/' + customDialogAlias+"/"+parentKey
          +"/"+lableKey
          +"/"+valueKey
          +"/"+parentVal
        ).then((response) => {
          if(response.code==0){
            this.widget.options.optionList= this.getTreeData(response.data)
          }else{
            this.$message.error('树配置错误')

          }

        })

      },
      getTreeData(data) {
        // 循环遍历json数据
        for (var i = 0; i < data.length; i++) {

          if (data[i].children.length < 1) {
            // children若为空数组，则将children设为undefined
            data[i].children = undefined;
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        }
        return data;
      },

      explend(widget) {
        if (widget) {
          var effect = widget.options.effectFiled;
          if (effect) {
            var dataModel = this.dataModel;
            if (effect.length > 0) {
              if (this.strutAll) {
                var list = this.strutAll.list
                if (list) {
                  for (var i = 0; i < effect.length; i++) {
                    var nodes = effect[i];
                    for (var j = 0; j <list.length ; j++) {
                      var node= list[j];
                      if(node.model==nodes){
                        node.options.show =  !node.options.show;
                        break
                      }
                    }
                  }
                }
              }
            }
          }
        }

      },
      handleReset() {
        this.$refs.esign.reset()
      },
      handleGenerate() {
        this.$refs.esign.generate().then(res => {
          this.dataModel = res
        }).catch(err => {
          this.$notify({
            title: '警告',
            message: err,
            type: 'warning'
          });
        })
      },
      depAssemblyConfirm: function () {
        var fildName = this.widget.options.fild
        var val = []
        var node = this.$refs.tree.getCheckedNodes()
        if (node) {
          for (var i = 0; i < node.length; i++) {
            val.push(node[i][fildName])
          }
        }
        val = val.join(',');
        this.dataModel = val
        // this.widget.options.annotationContext=(this.annotationForm.context)
        // this.annotationForm.context=""
        this.depAssemblyDialogVisible = false;

      },
      changeDemension: function (code) {
        this.tmpGroup = code;
        this.getTypesByKeyAction(code)
      },
      getKvAction: function () {

        request.get(API.prefix + '/uc/api/org/info/').then((response) => {
          var data = response.data;
          this.categoryKvData = data
        })
      },
      getTypesByKeyAction: function (code) {

        request.get(API.prefix + '/uc/api/org/tree/loadTree/' + code).then((response) => {
          var data = response.data;
          this.categoryData = []
          this.categoryData.push(data)
        })
      },
      getDemensionList: function () {
        request.post(API.prefix + '/uc/api/demension/list', qs.stringify(this.demensionForm)).then(res => {
          if (res.code == 0) {
            this.demensionData = res.data
            var isDefault = true;
            for (var value of res.data) {
              if (value.defaultVal) {
                isDefault = false
                this.depAssemblyForm.groupName = value['demName']
                this.getTypesByKeyAction(value['code']);
                this.depAssemblyForm.code = value['code']
                this.tmpGroup = value['code']
                break

              }
            }
            if (isDefault) {
              if (this.demensionData.length > 0) {
                var first = this.demensionData[0];
                this.depAssemblyForm.groupName = first['demName']
                this.tmpGroup = first['demName']
                this.getTypesByKeyAction(first['code']);
                this.depAssemblyForm.code = first['code']
              }
            }
          }

        })

      },
      depAssemblyOpen(widget) {
        var model = this.dataModels[this.widget.model]
        var fild = this.widget.options.fild
        filterDeviceTree(this.categoryData, model, fild)
        // if (model){
        //   var  val = model.split( ',' );
        //   this.categoryData.forEach(menu => {
        //     if(menu.children){
        //       for(let i = 0, len = menu.children.length; i<len; i++) {
        //         for (let j = 0; j <val.length ; j++) {
        //           if(menu.children[i][fild]==val[j]){
        //             menu.children[i].checked = true
        //           }else {
        //             menu.children[i].checked = false
        //           }
        //         }
        //
        //       }
        //     }
        //
        //   })
        //
        // }

        this.depAssemblyDialogVisible = true
      },

      validatePass(rule, info, callback) {
        var type = rule.customerType;
        var length = rule.val;
      },
      checkboxChange: function (data) {
      },
      watchForm: function (obj1) {
        var self = this;

        for (let key in obj1) {
          vm.jsExtend[key] = obj1[key]

        }


      },
      clickBtn: function () {
        var jsExpand = this.widget.options.jsExpand;
        var scriptContext = jsExpand;
        // 创建script标签，执行script内容
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.text = scriptContext
        document.getElementsByTagName('head')[0].appendChild(script)
      },
      annotationConfirm: function () {
        this.widget.options.annotationTitle = '查看批注'
        this.widget.options.annotationContext = (this.annotationForm.context)
        this.annotationForm.context = ""
        this.annotationDialogVisible = false;

      },

      clearAnnotation: function () {
        this.annotationForm.context = ""
      },
      showAnnotation() {
        return "10px"
      },
      showAnnotationColor() {
        if (this.widget.options.annotationTitle == '添加批注') {
          return '#3399ff';
        } else {
          return '#cc0000';
        }
      },
      addAnnotation() {
        this.annotationForm.context = this.widget.options.annotationContext
        this.annotationDialogVisible = true;
      },
      handleImageAdded: function (file, Editor, cursorLocation, resetUploader) {

        var formData = new FormData();
        formData.append("file", file);
        const url = this.widget.options.action;

        var options = {  // 设置axios的参数
          url: url,
          data: formData,
          name: file.name,
          method: 'post',
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        axios({
          method: "POST",
          url: url,
          data: formData
        }).then((res) => {
          let data = res.data
          if (data.code == 0) {
            Editor.insertEmbed(cursorLocation, "image", data.url);
          } else {
            this.$message.error(data.message || '操作失败')
          }
        }).catch((e) => {
          alert(e)
        })


      },
      onSelected(data) {
        this.address.province = data.province.value
        this.address.city = data.city.value
        this.address.county = data.area.value
        var model = this.widget.model
        this.dataModel=this.address
        this.dataModels[model] = this.address
      },
      handleTagClose(tag, index) {
        this.widget.options.options.splice(index, 1)
        this.dataModels[this.widget.model] = this.widget.options.options
      },
      nextStep(widget, index) {
        var active = widget.options.defaultValue;
        var activeLength = widget.options.stepItemOptions.length - 1;
        if (active < activeLength) {
          widget.options.defaultValue = active + 1

        }
        if (widget.options.defaultValue >= activeLength) {
          widget.options.nextStep = true
        }
        this.dataModels[widget.model] = widget.options.defaultValue
      },
      handleClose(tag) {
        this.widget.options.chooseFiledList.splice(this.dynamicTags.indexOf(tag), 1);
      },
      userDialogFormchangeFun(val) {
        this.userDialogFormMultipleSelection = val;
      },
      confirmFormCustomDialog: function () {

        var formCustomDialogMultipleSelection = this.formCustomDialogMultipleSelection;
        this.dialogFormVisible = false
        var templateSelectionData = this.templateSelectionData
        var chooseFiledList = this.widget.options.chooseFiledList
        for (var i = 0; i < chooseFiledList.length; i++) {
          var chooseFiled = chooseFiledList[i]
          var columnKey = chooseFiled.columnKey
          var target = chooseFiled.target
          if (target) {
            var columnKey_val = templateSelectionData[columnKey];
            this.dataModels[target] = columnKey_val
          }
        }

      },

      confirmUserFormCustomDialog: function () {
        //组织
        var userDialogFormMultipleSelections = this.userDialogFormMultipleSelection;
        var isSingle = this.widget.options.isSingle
        var chooseFiledList = [];
        var selectorType = this.widget.options.selectorType
        if (isSingle) {
          for (var i = 0; i < userDialogFormMultipleSelections.length; i++) {
            var obj = {};
            var userDialogFormMultipleSelection = userDialogFormMultipleSelections[i]
            if ("user-selector" == selectorType) {
              obj['lable'] = userDialogFormMultipleSelections[i].FULLNAME;
              obj['key'] = userDialogFormMultipleSelections[i].USER_NO;
            } else if ("role-selector" == selectorType) {
              obj['lable'] = userDialogFormMultipleSelections[i].NAME;
              obj['key'] = userDialogFormMultipleSelections[i].code;
            } else if ("job_selector" == selectorType) {
              obj['lable'] = userDialogFormMultipleSelections[i].name;
              obj['key'] = userDialogFormMultipleSelections[i].code;
            } else if ("post_selector" == selectorType) {
              obj['lable'] = userDialogFormMultipleSelections[i].POS_NAME;
              obj['key'] = userDialogFormMultipleSelections[i].code;
            }
            chooseFiledList.push(obj)
          }
          if (this.widget.options.chooseFiledList) {
            chooseFiledList = chooseFiledList.concat(this.widget.options.chooseFiledList)
            chooseFiledList = uniqueUser(chooseFiledList)
          }
          this.widget.options.chooseFiledList = chooseFiledList;
          this.dataModels[this.widget.model] = chooseFiledList
        } else {
          var chooseFiledList = [];
          var obj = {};
          if ("user-selector" == selectorType) {
            obj['lable'] = this.templateSelectionData.FULLNAME;
            obj['key'] = this.templateSelectionData.USER_NO;
          } else if ("role-selector" == selectorType) {
            obj['lable'] = this.templateSelectionData.NAME;
            obj['key'] = this.templateSelectionData.code;
          } else if ("job_selector" == selectorType) {
            obj['lable'] = this.templateSelectionData.name;
            obj['key'] = this.templateSelectionData.code;
          } else if ("post_selector" == selectorType) {
            obj['lable'] = this.templateSelectionData.POS_NAME;
            obj['key'] = this.templateSelectionData.code;
          }
          chooseFiledList.push(obj)
          this.widget.options.chooseFiledList = chooseFiledList;
          this.dataModels[this.widget.model] = chooseFiledList


        }

        this.userDialogFormVisible = false

      },
      changeFormCustomDialogFun: function (val) {
        this.formCustomDialogMultipleSelection = val;
      },
      handleformCustomDialogSizeChange(val) {
        this.formCustomDialogPageSize = val;
        this.formCustomDialogTableChange();
      },
      handleformCustomDialogCurrentChange(val) {
        this.formCustomDialogCurrentPage = val;
        this.formCustomDialogTableChange();

      },
      handleUserformCustomDialogSizeChange(val) {
        this.formCustomDialogPageSize = val;
        this.formUserCustomDialogTableChange();
      },
      handleUserformCustomDialogCurrentChange(val) {
        this.formCustomDialogCurrentPage = val;
        this.formUserCustomDialogTableChange();

      },
      formUserCustomDialogTableChange: function () {
        var customDialogAlias = this.widget.options.customDialogAlias;
        if (customDialogAlias.length <= 0) {
          customDialogAlias = this.widget.options.selectorType
        }
        request.get(API.prefix + '/form/customDialog/get/alia/' + customDialogAlias + "?length=" + this.formCustomDialogPageSize + "&page=" + this.formCustomDialogCurrentPage).then(res => {
          if (res.code == 0) {
            var data = res.data;

            this.customDialogData = data;
            var tableColumns = res.tableColumns;
            this.customDialogTableColumns = tableColumns;
            this.formCustomDialogData = res.formCustomDialogData;
            this.userDialogFormVisible = true;
            this.formCustomDialogTotal = parseInt(res.count)

          }

        })

      },
      formCustomDialogTableChange: function () {
        var customDialogAlias = this.widget.options.customDialogAlias;
        if (customDialogAlias.length <= 0) {
          customDialogAlias = this.widget.options.selectorType
        }
        request.get(API.prefix + '/form/customDialog/get/alia/' + customDialogAlias + "?length=" + this.formCustomDialogPageSize + "&page=" + this.formCustomDialogCurrentPage).then(res => {
          if (res.code == 0) {
            var data = res.data;

            this.customDialogData = data;
            var tableColumns = res.tableColumns;
            this.customDialogTableColumns = tableColumns;
            this.formCustomDialogData = res.formCustomDialogData;
            this.dialogFormVisible = true;
            this.formCustomDialogTotal = parseInt(res.count)

          }

        })

      },

      singleElection(row) {
        this.templateSelection = this.tableData.indexOf(row);
        // this.templateRadio = row.id;
        this.templateSelectionData = row
      },
      userDialogingleElection(row) {
        this.templateSelection = this.tableData.indexOf(row);
        // this.templateRadio = row.id;
        this.templateSelectionData = row
      },
      handleDialog: function () {
        if (this.widget.options.customDialogAlias.length > 0) {
          var customDialogAlias = this.widget.options.customDialogAlias;
          request.get(API.prefix + '/form/customDialog/get/alia/' + customDialogAlias).then(res => {
            if (res.code == 0) {
              var data = res.data;
              this.customDialogData = data;
              var tableColumns = res.tableColumns;
              this.customDialogTableColumns = tableColumns;
              this.formCustomDialogData = res.formCustomDialogData;
              this.dialogFormVisible = true;
              this.formCustomDialogTotal = parseInt(res.count)

            }

          })
        } else {
          this.$message.error("没有选择关联的对话框数据");
        }
      },
      handleUserDialog: function () {
        if (this.widget.options.selectorType.length > 0) {
          var selectorType = this.widget.options.selectorType;
          request.get(API.prefix + '/form/customDialog/get/alia/' + selectorType).then(res => {
            if (res.code == 0) {
              var data = res.data;
              this.customDialogData = data;
              var tableColumns = res.tableColumns;
              this.customDialogTableColumns = tableColumns;
              this.formCustomDialogData = res.formCustomDialogData;
              this.userDialogFormVisible = true;
              this.formCustomDialogTotal = parseInt(res.count)

            }

          })
        } else {
          this.$message.error("请先设置选择器");
        }
      },
      validatePass(rule, info, callback) {

        verification(rule, info, callback)
      },
      fireControlsRule: function (data) {
        var dataModel = this.dataModel;

        var effect = this.widget.options.effect
        if (effect.length > 0) {
          if (this.strutAll) {
            var list = this.strutAll.list
            if (list) {
              for (var i = 0; i < effect.length; i++) {
                var nodes = effect[i];
                if (nodes.value == dataModel) {
                  var effects = nodes.effects;

                  for (var j = 0; j < effects.length; j++) {
                    var node = effects[j];
                    var target = node.target
                    var value = node.value
                    var type = node.type

                    for (let j = 0; j < list.length; j++) {
                      var allNode = list[j];
                      if (allNode.model == target) {
                        if (type == 'n') {
                          allNode.options.show = false;
                        } else if (type == 'w') {
                          allNode.options.show = true;
                        } else if (type == 'b') {
                          allNode.options.required = true;
                          var data = {};
                          data["validator"] = this.validatePass;
                          data["trigger"] = "blur";
                          data["msg"] = '必填';
                          data["customerType"] = 'nonull';
                          allNode.rules.push(data)

                        }

                      }
                    }
                  }
                }


              }
            }
          }
        }


      },
      initRemoteFuncs: function () {
        var remoteUrlKey = this.widget.options.remoteUrlKey;
        if (this.widget.options) {
          if (remoteUrlKey) {
            if (this.widget.type == 'select' || this.widget.type == "radio") {
              if (remoteUrlKey && remoteUrlKey.length > 0) {
                request.post(API.prefix + '/sys/dict/item/get/dictItem/' + remoteUrlKey).then(res => {
                  var options = res.data;
                  var datas = [];
                  if (res.code == 0) {
                    for (var i = 0; i < options.length; i++) {
                      var obj = {};
                      obj['label'] = options[i]['itemCode']
                      obj['value'] = options[i]['itemName']
                      datas.push(obj)
                    }
                    this.remoteFuncsFields = datas;

                  }
                })
              }
            } else {
              if (this.widget.options.props) {
                var label = this.widget.options.props.label
                var value = this.widget.options.props.value
                if (remoteUrlKey && remoteUrlKey.length > 0) {
                  request.get(API.prefix + '/form/customQuery/manger/' + remoteUrlKey).then(res => {
                    var options = res.data;
                    var datas = [];
                    if (res.code == 0) {
                      for (var i = 0; i < options.length; i++) {
                        var obj = {};
                        obj[label] = options[i][label]
                        obj[value] = options[i][value]
                        datas.push(obj)
                      }
                      this.remoteFuncsFields = datas;

                    }
                  })
                }
              }
            }
          }


        }


      },
      changeDate() {
        var val = this.dataModel;
        var format = this.widget.options.format
        var strutAll = this.strutAll
        var path = this.path;
        if (path != undefined) {
          //区域外的
          if (path) {
            var pathDot = path.split(".")
            if (pathDot) {
              var blockId = pathDot[0];
              var index = pathDot[1];
              var modelId = pathDot[2];
              var list = strutAll.list
              var curNode = this.widget.model;
              var otherNodes = findTableColumnControls(list, blockId, index)
              if (otherNodes) {
                for (var i = 0; i < otherNodes.length; i++) {
                  var node = otherNodes[i];
                  var dateCalculationEnd = node.options.dateCalculationEnd
                  var dateCalculationStart = node.options.dateCalculationStart

                  var dateCalcDiffType = node.options.dateCalcDiffType


                  var dateCalculationEndVal = this.$parent.elForm.model[blockId][index][node.options.dateCalculationEnd]
                  var dateCalculationStartVal = this.$parent.elForm.model[blockId][index][node.options.dateCalculationStart]
                  var operateVal = '';
                  if (dateCalculationStartVal && dateCalculationEndVal) {
                    if (dateCalculationEnd == curNode || dateCalculationStart == curNode) {
                      operateVal = dateCalculationEndVal - dateCalculationStartVal;

                    }
                    if (operateVal > 0) {
                      if (dateCalcDiffType == 'day') {
                        operateVal = operateVal / (24 * 60 * 60 * 1000);

                      } else if (dateCalcDiffType == 'hour') {
                        operateVal = operateVal / (60 * 60 * 1000);
                      } else if (dateCalcDiffType == 'minute') {
                        operateVal = operateVal / (60 * 1000);
                      } else if (dateCalcDiffType == 'second') {
                        operateVal = operateVal / (1000);
                      }
                      operateVal = parseInt(operateVal)
                      this.$parent.elForm.model[blockId][index][node.model] = operateVal
                    }
                  }
                }
              }

            }
          }


        } else {
          var list = strutAll.list
          var otherNodes = getAllControls(strutAll.list, this.widget.model);
          var curNode = this.widget.model;
          for (var i = 0; i < otherNodes.length; i++) {
            var node = otherNodes[i];
            var dateCalculationEnd = node.options.dateCalculationEnd
            var dateCalculationStart = node.options.dateCalculationStart

            var dateCalcDiffType = node.options.dateCalcDiffType


            var dateCalculationEndVal = this.$parent.elForm.model[node.options.dateCalculationEnd]
            var dateCalculationStartVal = this.$parent.elForm.model[node.options.dateCalculationStart]
            var operateVal = '';
            if (dateCalculationStartVal && dateCalculationEndVal) {
              if (dateCalculationEnd == curNode || dateCalculationStart == curNode) {
                operateVal = dateCalculationEndVal - dateCalculationStartVal;

              }
              if (operateVal > 0) {
                if (dateCalcDiffType == 'day') {
                  operateVal = operateVal / (24 * 60 * 60 * 1000);

                } else if (dateCalcDiffType == 'hour') {
                  operateVal = operateVal / (60 * 60 * 1000);
                } else if (dateCalcDiffType == 'minute') {
                  operateVal = operateVal / (60 * 1000);
                } else if (dateCalcDiffType == 'second') {
                  operateVal = operateVal / (1000);
                }
                operateVal = parseInt(operateVal)
                this.$parent.elForm.model[node.model] = operateVal
              }
            }


          }
        }


      },
      elShowWidth(elIsTable, wowidth) {
        if (elIsTable == 'table') {
          return '95%'
        } else if (elIsTable == 'block') {
          return '70%'
        } else {
          if (wowidth == "200px") {
            return '100%'
          } else {
            return wowidth;

          }
        }
      },


      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      initTableData() {
        var self = this;
        self.gridData = [{name: "张三"}, {name: "李四"}];
      },
      getTableData: function () {
        var self = this;
        if (this.$route) {
          let params = this.$route.query;
          var processInstanceId = params.processInstanceId

        }

        self.tableData = []
        // if (processInstanceId){
        //     request.get(API.prefix+'/a1bpmn/api/runtime/hisInstance/v2/nodeOpinion/'+processInstanceId+'?page=1&limit=5').then(res => {
        //         var data=  res.data;
        //
        //
        //     })
        // }
        // if (checkIsNullOrEmpty(processInstanceId)) {
        //     if (self.tableData.length==0){
        //
        //     }
        // }


      },
      handleEdit(index, row) {
        // console.log(index, row.name);
      },
      handleDelete(index, row) {
        //console.log(index, row);
      },
      processRemoteProps(children, props) {
        if (children.length) {
          return children.map(item => {
            if (this.processRemoteProps(item[props.children]).length) {
              return {
                value: item[props.value],
                label: item[props.label],
                children: this.processRemoteProps(item[props.children])
              }
            } else {
              return {
                value: item[props.value],
                label: item[props.label],
              }
            }
          })
        } else {
          return []
        }
      }
    },
    watch: {
      value(newVal, oldVal) {
        this.dataModel = newVal
      },
      dataModel(val, oldVal) {
        var _vm = vm;
        if (_vm.jsExtend) {
          if (_vm.jsExtend[this.widget.model]) {
            _vm.jsExtend[this.widget.model](val, oldVal)

          }
        }


        this.$emit('input', val);

        var parent = this.$parent;
        while (parent != undefined && parent.hasOwnProperty('$options') && parent.$options._componentTag != 'fm-form-block' && parent.$options._componentTag != 'fm-form-table') {
          parent = parent.$parent;
        }
        if (parent != undefined && parent.hasOwnProperty('$options') && (parent.$options._componentTag == 'fm-form-block')) {
          /* this.models[this.widget.model]=val;
           this.models_temp.push(this.widget.model);*/
          this.models[this.path] = val;
          this.models_temp.push(this.path);
        } else if (parent != undefined && parent.hasOwnProperty('$options') && (parent.$options._componentTag == 'fm-form-table')) {
//                    this.models[this.widget.model]=val;
          this.models[this.path] = val;
          this.models_temp.push(this.path);
        }/*else{
                    this.models[this.widget.model]=val;
                }*/

      },
      models: {
        deep: true,
        handler(val) {
          this.dataModels = this.models
        }
      },
      dataModels: {
        deep: true,
        handler(val) {
          // this.dataModel = val[this.widget.model]   //--此行代码在表格预览有问题，导致不可输入
          this.$emit('update:models', val)
        }
      }
    },

  }
</script>


<style type="text/css">
  .ql-editor-class {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.42;
    height: 100%;
    outline: none;
    padding: 0 !important;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    word-wrap: break-word;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .st0 {
    fill: #F9F9F9;
    stroke: #F9F9F9;
    stroke-miterlimit: 10;
  }

  .st1 {
    fill: #FFFFFF;
    stroke: #F9F9F9;
    stroke-miterlimit: 10;
  }

  .st2 {
    fill: #FFFFFF;
    stroke: #F9F9F9;
    stroke-width: 0.5;
    stroke-miterlimit: 10;
  }

  .st3 {
    opacity: 0.65;
    fill: #040000;
  }

  .st4 {
    font-family: 'MicrosoftYaHei';
  }

  .st5 {
    font-size: 10px;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
